<template>
  <el-dialog
    :model-value="visible"
    :close-on-click-modal="false"
    title="icon"
    width="60%"
    top="50px"
    center
  >
    <div class="search_bar">
      <el-input v-model="name" :prefix-icon="Search" placeholder="请输入需要搜索的icon名称" @keyup.enter.native="search" />
    </div>
    <el-tabs v-model="active">
      <el-tab-pane v-for="(item, index) in iconList" :key="index" :label="item.title + '（' + item.list.length + '）'" :name="index">
        <ul v-if="item.list?.length">
          <li v-for="icon in item.list" :key="icon" @click.native="chooseIcon(icon)">
            <icon :icon="icon" size="24" />
            <p>{{ icon }}</p>
          </li>
        </ul>
        <el-empty v-else :image-size="200" />
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>
<script setup>
import { ref, onBeforeMount } from 'vue'
import { iconData } from './iconData'
import { Search } from '@element-plus/icons-vue'
defineProps({
  visible: {
    type: Boolean,
    default: false
  },
})

const name = ref('')
const iconList = ref([])
const active = ref(0)
const emits = defineEmits(['choose'])
const init = () => {
  iconList.value = iconData
}
const search = () => {
  iconList.value = JSON.parse(JSON.stringify(iconData))
  for (let i = 0; i < iconList.value.length; i++) {
    iconList.value[i].list = iconData[i].list.filter(item => item.indexOf(name.value.trim()) !== -1)
  }
}
const chooseIcon = (name) => {
  emits('choose', name)
}

onBeforeMount(() => {
  init()
})
</script>
<style lang="scss" scoped>
.el-tabs {
ul {
  display: flex;
  flex-wrap: wrap;
  li {
    width: calc(12.5% - 12px);
    cursor: pointer;
    padding: 15px;
    border: 1px solid #E0E0E0;
    text-align: center;
    margin: 5px;
    &>p {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-top: 5px;
    }
    &:hover {
      color: #409EFE;
      .el-icon {
        color: #409EFE;
      }
    }
  }
}
.el-pagination {
  margin-top: 20px;
}
}
</style>
